<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px;"
				@clickRight="showSetUp"
				@clickLeft="goHome"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#F1F1F1"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#7F7F7F" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<view class="imageTopBox"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/FAQ/2x/FAQ2@2x.png"></image></view>
			<view class="tabTopBox">
				<view class="tabTopBoxL">FAQ</view>
				<view class="tabTopBoxR">
					<uni-easyinput
						style="opacity: 0;"
						type="text"
						:clearable="false"
						class="classInput"
						:inputBorder="true"
						v-model="search"
						:placeholder="this.$t('cartoon').ctwfont2"
					></uni-easyinput>
					<view class="tabTopBoxRText" style="opacity: 0;">
						<image style="width: 13px; height: 13px;" mode="scaleToFill" src="/static/icon/FAQ/2x/FAQ5@2x.png"></image>
					</view>
				</view>
			</view>
			<view class="bigImg">
				<view class="bigImgItem" v-for="item in imgArr" :key="item.id" @tap="imgBg(item)">
					<view class="serviceImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" :src="item.value"></image></view>
					<view class="serviceImgTitle" :style="{ color: bigImgItem === item.id ? '#4a4c58' : '#909090' }">{{ item.text }}</view>
					<view class="serviceImgBottomLine" :style="{ borderColor: bigImgItem === item.id ? '#CD001B' : '#DDDDDD' }"></view>
				</view>
				<view class="bigImgLine"></view>
			</view>

			<!-- 内容 -->
			<view class="neironBox">
				<uni-collapse accordion>
					<uni-collapse-item :open="index === 0" v-for="(item, index) in collapseList" :key="item.id">
						<template v-slot:title>
							<view style="display: flex; align-items: center; ">
								<view class="slotTitle">
									<view class="line"></view>
									<view style="width: 600rpx;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.title }}</view>
								</view>

								<!-- <view style="font-size: 14px; flex: 7;">{{ item.text }}</view> -->
							</view>
						</template>
						<view class="collapseneiron">
							<view class="collapseneironMinBox">
								<!-- <view style="font-size: 14px; flex: 1;">{{ item2.title }}</view> -->
								<!-- <view style="font-size: 12px; flex: 7;word-break: break-all;">{{ item.description }}</view> -->
								<view v-html="item.textWithoutPageBreak"></view>
							</view>
						</view>
						<!-- 				<view class="collapseneiron">
							<view class="collapseneironMinBox" v-for="item2 in item.children" :key="item2.id">
								<view style="font-size: 14px; flex: 1;">{{ item2.title }}</view>
								<view style="font-size: 12px; flex: 7;word-break: break-all;">{{ item2.text }}</view>
							</view>
						</view> -->
					</uni-collapse-item>
					<view style="text-align: center; color: #3B4144;" v-show="collapseList.length === 0">ไม่มีข้อมูลแสดง</view>
				</uni-collapse>
			</view>
			<page-pagination
				v-show="total !== 0"
				mode="multi"
				color="#CD001B"
				:pageSize="pageSize"
				:showPageSize="7"
				forceEllipses
				:total="total"
				:currentPage="currentPage"
				@change="paginationChange"
			></page-pagination>
		</view>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
		<!-- 底部菜单 -->
		<bottom-pages></bottom-pages>
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import bottomPages from '@/pages/home/bottomPages.vue'; // 底部
import { getStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0,
			windowHeight: 0,
			back_k: 0, // 物理返回
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			search: '', // 搜索
			bigImgItem: 1,
			bigImgItemText: 'Account',
			imgArr: [
				{
					value: '/static/icon/FAQ/2x/FAQ01@3x.png',
					text: 'Account',
					id: 1
				},
				{
					value: '/static/icon/FAQ/2x/FAQ02@3x.png',
					text: 'Order',
					id: 2
				},
				{
					value: '/static/icon/FAQ/2x/FAQ03@3x.png',
					text: 'Track & Trace',
					id: 3
				},
				{
					value: '/static/icon/FAQ/2x/FAQ04@3x.png',
					text: 'Freight',
					id: 4
				},
				{
					value: '/static/icon/FAQ/2x/FAQ05@3x.png',
					text: 'Payment',
					id: 5
				},
				{
					value: '/static/icon/FAQ/2x/FAQ06@3x.png',
					text: 'Terms of Service',
					id: 6
				}
			],
			collapseList: [],
			pageSize: 10,
			total: 0,
			currentPage: 1
		};
	},
	onShow() {
		this.getList();
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onHide() {
		if (this.$refs.SetUpPopup) {
			this.$refs.SetUpPopup.close();
		}
		if (this.$refs.signOutBox) {
			this.$refs.signOutBox.close();
		}
		this.popupIsShow = false;
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
				that.windowHeight = res.windowHeight;
			}
		});
	},
	components: { setUpPages, signOut, bottomPages },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 44; // 44是顶部高度
			return num + 'px';
		}
	},
	methods: {
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				if (this.popupIsShow) {
					this.$refs.SetUpPopup.close();
					this.popupIsShow = false;
				} else if (this.signOutShow) {
					this.$refs.signOutBox.close();
					this.signOutShow = false;
				} else {
					let main = plus.android.runtimeMainActivity();
					if (this.back_k > 0) {
						this.back_k = 0;
						return main.moveTaskToBack(false);
						// return plus.runtime.quit();
					} else {
						const pages = getCurrentPages();
						if (pages.length === 1) {
							this.back_k++;
							setTimeout(() => {
								this.back_k--;
							}, 1000);
							// #ifdef APP-PLUS
							uni.redirectTo({
								url: '/pages/home/index'
							});
							// #endif
							// #ifdef H5
							this.$Router.push('/pages/home/index');
							// #endif
							// uni.showToast({
							// 	title: '再按一次退出应用',
							// 	icon: 'none',
							// 	duration: 1000
							// });
						}
					}
				}
			}
		},
		// 返回home
		goHome() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		},
		// 分页器
		paginationChange(e) {
			this.currentPage = e; // 页数
			this.getList();
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 获取数据
		async getList() {
			const lang = getStorage('language') || 'th';
			let text = '';
			if (lang === 'zh') {
				if (this.bigImgItemText === 'Terms of Service') {
					text = 'Terms';
				} else if (this.bigImgItemText === 'Track & Trace') {
					text = 'Track';
				} else {
					text = this.bigImgItemText;
				}
				text = text.toLowerCase() + '_chinese';
			} else if (lang === 'en') {
				if (this.bigImgItemText === 'Terms of Service') {
					text = 'Terms';
				} else if (this.bigImgItemText === 'Track & Trace') {
					text = 'Track';
				} else {
					text = this.bigImgItemText;
				}
				text = text.toLowerCase() + '_english';
			} else {
				if (this.bigImgItemText === 'Terms of Service') {
					text = 'Terms';
				} else if (this.bigImgItemText === 'Track & Trace') {
					text = 'Track';
				} else {
					text = this.bigImgItemText;
				}
				text = text.toLowerCase() + '_thai';
			}

			const params = {
				number: text,
				isPage: '1',
				limit: this.pageSize,
				page: this.currentPage,
				isShowDetail: '1'
			};
			const { data: res } = await this.$http(true, 'api/info/infoList', params, 'GET');
			if (res.errno === 0) {
				if (res.data) {
					this.collapseList = res.data.list;
					this.total = res.data.total;
				} else {
					this.collapseList = [];
				}
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 背景
		imgBg(val) {
			this.bigImgItemText = val.text;
			this.bigImgItem = val.id;
			this.currentPage = 1; // 页数
			this.total = 0;
			this.getList();
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
			this.total = 0;
			this.getList();
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-easyinput__content {
	min-height: 25px;
	border: 1px solid #808080;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}
::v-deep .uni-collapse-cell--open {
	background-color: #fff;
}
::v-deep .uni-collapse-cell--hide {
	height: 20px;
}
::v-deep .uni-collapse-cell {
	border: none;
	box-shadow: 0 3px 5px 1px #e1e1e1;
	margin-bottom: 10px;
}
::v-deep .uni-collapse-cell__title:active {
	background-color: #fff;
}
::v-deep .uni-collapse-cell__title {
	padding: 0;
	height: 20px;
	line-height: 20px;
	// justify-content: flex-start;
}
::v-deep .uni-collapse-cell__title-text {
	font-size: $uni-font-size-custom-e;
	// font-weight: 600;
	color: #474956;
	flex: none;
}
::v-deep .uni-collapse-cell__title-arrow {
	margin-left: 5px;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #f1f1f1;
		width: 100%;
	}
}
.zhuti {
	.imageTopBox {
		width: 100%;
		height: 100px;
	}
	.tabTopBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 10px;
		// height: 40px;
		// line-height: 40px;
		box-sizing: border-box;
		.tabTopBoxL {
			color: #CD001B;
			font-size: $uni-font-size-custom-e;
			font-weight: 700;
		}
		.tabTopBoxR {
			display: flex;
			// align-items: center;
			border-radius: 3px;
			overflow: hidden;
			.classInput {
				width: 400rpx;
				height: 25px;
				line-height: 25px;
			}
			.tabTopBoxRText {
				padding: 0 20px;
				background-color: #CD001B;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bigImg {
		position: relative;
		display: flex;
		justify-content: space-around;
		background-color: #fbfbfb;
		padding: 10px 10px 0 10px;
		.bigImgLine {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			border-bottom: 5px solid #dddddd;
		}
		.bigImgItem {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.serviceImg {
			width: 30px;
			height: 30px;
			margin-bottom: 5px;
			transform: scale(1.2);
		}
		.serviceImgTitle {
			position: absolute;
			bottom: 10px;
			width: 100rpx;
			font-size: $uni-font-size-custom-a;
			line-height: 11px;
			text-align: center;
			color: #4a4c58;
		}
		.serviceImgBottomLine {
			border-bottom: 5px solid #dddddd;
			width: 150%;
			margin-top: 20px;
			z-index: 10;
		}
	}

	.neironBox {
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		min-height: 400px;
		margin-top: 20px;
		.collapseneiron {
			background-color: #fbfbfb;
			padding: 10px;
			box-shadow: 0 3px 5px 1px #e1e1e1;
			.collapseneironMinBox {
				display: flex;
				justify-content: space-between;
			}
		}
		.slotTitle {
			font-size: $uni-font-size-custom-d;
			flex: 1;
			display: flex;
			align-items: center;
			margin-right: 5px;
			.line {
				width: 2px;
				height: 20px;
				background-color: #CD001B;
				margin-right: 3px;
			}
		}
		// .slotTitle::before {
		// 	content: '';
		// 	display: inline-block;
		// 	width: 2px;
		// 	height: 18px;
		// 	background-color: #CD001B;
		// }
	}
}
</style>
